<template>
	<view class="leave-application">
		
		
		<!-- 主表单内容 -->
		<view class="form-content">
			<view class="form-card">
				<!-- 请假类别 -->
				<view class="form-item">
					<view class="form-label required">
						Leave Category
					</view>
					<view class="form-input-container">
						<view class="selector" @click="showCategoryPicker">
							<view class="selector-icon">
								<image src="/static/uniapp/leave_category.png" mode="aspectFit"></image>
							</view>
							<view class="selector-text">
								<text>{{ selectedCategory || 'Select Category' }}</text>
							</view>
							<view class="selector-arrow">
								<image src="/static/uniapp/arrow-down.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 请假时长 -->
				<view class="form-item">
					<view class="form-label required">
						Leave Duration
					</view>
					<view class="leave-duration-text">
						Select Leave Duration
					</view>
					
					<!-- 日期选择按钮 -->
					<view class="form-input-container" @click="showDurationPicker">
						<view class="selector">
							<view class="selector-icon">
								<image src="/static/uniapp/duration.png" mode="aspectFit"></image>
							</view>
							<view class="selector-text">
								<text>{{ selectedDuration || 'Select Duration' }}</text>
							</view>
							<view class="selector-arrow">
								<image src="/static/uniapp/arrow-down.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 请假天数 -->
				<view class="form-item">
					<view class="form-label required">
						Duration/days
					</view>
					<view class="form-input-container">
						<input type="text" class="day-input" :value="durationDays" placeholder="According to the selection of display time" disabled />
					</view>
				</view>
				
				<!-- 请假说明 -->
				<view class="form-item">
					<view class="form-label">
						Leave Description
					</view>
					<view class="form-input-container">
						<textarea class="description-input" placeholder="Enter Leave Description" v-model="leaveDescription"></textarea>
					</view>
				</view>
				
				<!-- 上传图片 -->
				<view class="form-item">
					<view class="form-label-with-note">
						<text>Picture</text>
						<text class="note-text required">Upload a maximum of 9 images</text>
					</view>
					<view class="image-uploader">
						<view class="upload-box" @click="chooseImage">
							<text class="upload-icon">+</text>
						</view>
						<view class="image-preview" v-for="(image, index) in uploadedImages" :key="index">
							<image :src="image" mode="aspectFill"></image>
							<view class="delete-image" @click="deleteImage(index)">×</view>
						</view>
					</view>
				</view>
				
				<!-- 审批人 -->
				<view class="form-item">
					<view class="form-label required">
						Examine and approve
					</view>
					<view class="approver-selector">
						<view class="add-approver" @click="addApprover">
							<text class="add-icon">+</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="bottom-actions">
			<view class="action-btn save-btn" @click="saveForRelease">
				Save for release
			</view>
			<view class="action-btn submit-btn" @click="submitLeave">
				Submit
			</view>
		</view>
		
		<!-- 日历控件 - 移到页面底部 -->
		<view class="calendar-popup" :class="{ 'calendar-popup-show': showCalendar }">
			<view class="calendar-container">
				<view class="calendar-header">
					<view class="calendar-nav prev" @click="prevMonth">
						<image class="calendar-nav-icon" src="/static/uniapp/arrow-right.png" mode=""></image>
					</view>
					<view class="calendar-title">
						{{ currentMonth }} {{ currentYear }}
					</view>
					<view class="calendar-nav next" @click="nextMonth">
						<image class="calendar-nav-icon" src="/static/uniapp/arrow-left.png" mode=""></image>
					</view>
				</view>
				
				<!-- 星期标题 -->
				<view class="calendar-weekdays">
					<view class="weekday" v-for="(day, index) in weekdays" :key="index">
						{{ day }}
					</view>
				</view>
				
				<!-- 日期网格 -->
				<view class="calendar-days">
					<view 
						v-for="(day, index) in daysArray" 
						:key="index" 
						:class="[
							'calendar-day', 
							day.isCurrentMonth ? '' : 'other-month',
							isSelectedDay(day.date) ? 'selected-day' : '',
							isStartDay(day.date) ? 'start-day' : '',
							isEndDay(day.date) ? 'end-day' : '',
							isInRange(day.date) ? 'in-range-day' : ''
						]"
						@click="selectDay(day)"
					>
						{{ day.dayNumber }}
					</view>
				</view>
				
				<!-- 日历底部按钮 -->
				<view class="calendar-actions">
					<view class="calendar-submit-btn" @click="submitDateRange">
						Submit Date
					</view>
				</view>
				
				<!-- 关闭按钮 -->
				<view class="calendar-close-btn" @click="closeCalendar">
					Close Message
				</view>
			</view>
		</view>
		<view class="calendar-mask" v-if="showCalendar" @click="closeCalendar"></view>
		
		<!-- 类别选择弹窗 -->
		<view class="category-popup" :class="{ 'category-popup-show': showCategoryPopup }">
			<view class="category-container">
				<view class="category-header">
					<view class="category-title">Leave Category</view>
				</view>
				<view class="category-options">
					<view 
						v-for="(option, index) in categoryOptions" 
						:key="index" 
						class="category-option" 
						:class="{ 'category-option-selected': selectedCategory === option }"
						@click="selectAndConfirmCategory(option)"
					>
						<view class="category-option-icon">
							<image src="/static/uniapp/leave_category.png" mode="aspectFit" v-if="selectedCategory === option"></image>
						</view>
						<view class="category-option-text">{{ option }}</view>
					</view>
				</view>
				<view class="category-actions">
					<view class="category-close-btn" @click="closeCategoryPicker">
						Close
					</view>
				</view>
			</view>
		</view>
		<view class="category-mask" v-if="showCategoryPopup" @click="closeCategoryPicker"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedCategory: '',
				selectedDuration: '',
				startDate: '',
				endDate: '',
				durationDays: '',
				leaveDescription: '',
				uploadedImages: [],
				approvers: [],
				
				categoryOptions: ['Sick Leave', 'Personal Leave'],
				durationOptions: ['Half Day', 'Full Day', 'Multiple Days'],
				
				// 日历相关数据
				showCalendar: false,
				currentDate: new Date(),
				currentYear: new Date().getFullYear(),
				currentMonth: '',
				daysArray: [],
				weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
				months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
				tempStartDate: null,
				tempEndDate: null,
				
				// 类别选择器数据
				showCategoryPopup: false,
				tempCategory: ''
			}
		},
		onLoad() {
			// 初始化日期为当前日期
			const today = this.formatDate(new Date());
			this.startDate = today;
			this.endDate = today;
			
			// 初始化日历
			this.initCalendar();
			
			// 模拟图标加载
			this.mockIcons();
		},
		methods: {
			// 模拟图标，实际应用中应该有真实的图标资源
			mockIcons() {
				// 如果静态资源不存在，可以稍后添加
				console.log('模拟图标加载');
			},
			// 格式化日期为 yyyy-MM-dd
			formatDate(date) {
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
			},
			// 初始化日历
			initCalendar() {
				const date = this.currentDate;
				this.currentYear = date.getFullYear();
				this.currentMonth = this.months[date.getMonth()];
				this.generateDays();
			},
			// 生成当月日期数组
			generateDays() {
				const year = this.currentYear;
				const month = this.months.indexOf(this.currentMonth);
				
				// 获取当月第一天是星期几
				const firstDay = new Date(year, month, 1);
				const firstDayWeekday = firstDay.getDay();
				
				// 获取当月天数
				const daysInMonth = new Date(year, month + 1, 0).getDate();
				
				// 获取上个月天数
				const daysInPrevMonth = new Date(year, month, 0).getDate();
				
				const days = [];
				
				// 添加上个月的日期
				for (let i = firstDayWeekday - 1; i >= 0; i--) {
					const prevMonth = month === 0 ? 11 : month - 1;
					const prevYear = month === 0 ? year - 1 : year;
					const day = daysInPrevMonth - i;
					const date = new Date(prevYear, prevMonth, day);
					
					days.push({
						date: this.formatDate(date),
						dayNumber: day,
						isCurrentMonth: false
					});
				}
				
				// 添加当月的日期
				for (let i = 1; i <= daysInMonth; i++) {
					const date = new Date(year, month, i);
					
					days.push({
						date: this.formatDate(date),
						dayNumber: i,
						isCurrentMonth: true
					});
				}
				
				// 计算需要添加几天下个月的日期
				const remainingCells = 42 - days.length; // 6周 x 7天 = 42个单元格
				
				// 添加下个月的日期
				for (let i = 1; i <= remainingCells; i++) {
					const nextMonth = month === 11 ? 0 : month + 1;
					const nextYear = month === 11 ? year + 1 : year;
					const date = new Date(nextYear, nextMonth, i);
					
					days.push({
						date: this.formatDate(date),
						dayNumber: i,
						isCurrentMonth: false
					});
				}
				
				this.daysArray = days;
			},
			// 上个月
			prevMonth() {
				const monthIndex = this.months.indexOf(this.currentMonth);
				if (monthIndex === 0) {
					this.currentYear--;
					this.currentMonth = this.months[11];
				} else {
					this.currentMonth = this.months[monthIndex - 1];
				}
				this.generateDays();
			},
			// 下个月
			nextMonth() {
				const monthIndex = this.months.indexOf(this.currentMonth);
				if (monthIndex === 11) {
					this.currentYear++;
					this.currentMonth = this.months[0];
				} else {
					this.currentMonth = this.months[monthIndex + 1];
				}
				this.generateDays();
			},
			// 选择日期
			selectDay(day) {
				if (!day.isCurrentMonth) return;
				
				const selectedDate = day.date;
				
				// 如果尚未选择开始日期，或者已经同时选择了开始和结束日期，则重新开始选择
				if (!this.tempStartDate || (this.tempStartDate && this.tempEndDate)) {
					this.tempStartDate = selectedDate;
					this.tempEndDate = null;
				} 
				// 如果已经选择了开始日期，现在选择结束日期
				else if (this.tempStartDate && !this.tempEndDate) {
					// 确保结束日期不早于开始日期
					if (new Date(selectedDate) < new Date(this.tempStartDate)) {
						this.tempEndDate = this.tempStartDate;
						this.tempStartDate = selectedDate;
					} else {
						this.tempEndDate = selectedDate;
					}
				}
			},
			// 判断是否是选中的日期
			isSelectedDay(date) {
				return date === this.tempStartDate || date === this.tempEndDate;
			},
			// 判断是否是开始日期
			isStartDay(date) {
				return date === this.tempStartDate;
			},
			// 判断是否是结束日期
			isEndDay(date) {
				return date === this.tempEndDate;
			},
			// 判断日期是否在选中范围内
			isInRange(date) {
				if (!this.tempStartDate || !this.tempEndDate) return false;
				
				const current = new Date(date);
				const start = new Date(this.tempStartDate);
				const end = new Date(this.tempEndDate);
				
				return current > start && current < end;
			},
			// 提交选择的日期范围
			submitDateRange() {
				if (this.tempStartDate && this.tempEndDate) {
					this.startDate = this.tempStartDate;
					this.endDate = this.tempEndDate;
					this.calculateDuration();
					this.updateDurationText();
					this.showCalendar = false;
				} else if (this.tempStartDate) {
					// 如果只选择了一天，开始和结束日期相同
					this.startDate = this.tempStartDate;
					this.endDate = this.tempStartDate;
					this.calculateDuration();
					this.updateDurationText();
					this.showCalendar = false;
				} else {
					uni.showToast({
						title: '请选择日期',
						icon: 'none'
					});
				}
			},
			// 关闭日历
			closeCalendar() {
				this.showCalendar = false;
				// 重置临时选择
				if (!this.startDate && !this.endDate) {
					this.tempStartDate = null;
					this.tempEndDate = null;
				}
			},
			navigateBack() {
				uni.navigateBack();
			},
			showCategoryPicker() {
				this.tempCategory = this.selectedCategory;
				this.showCategoryPopup = true;
			},
			// 显示日期选择器
			showDurationPicker() {
				// 初始化临时选择
				this.tempStartDate = this.startDate || null;
				this.tempEndDate = this.endDate || null;
				this.showCalendar = true;
			},
			// 计算请假天数
			calculateDuration() {
				if (!this.startDate || !this.endDate) {
					this.durationDays = '';
					return;
				}
				
				const start = new Date(this.startDate);
				const end = new Date(this.endDate);
				const diffTime = Math.abs(end - start);
				const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1; // 加1是因为包含开始日期和结束日期
				
				this.durationDays = diffDays.toString();
			},
			// 更新时长显示文本
			updateDurationText() {
				if (this.startDate === this.endDate) {
					this.selectedDuration = `${this.startDate}`;
				} else {
					this.selectedDuration = `${this.startDate} to ${this.endDate}`;
				}
			},
			chooseImage() {
				if (this.uploadedImages.length >= 9) {
					uni.showToast({
						title: '最多上传9张图片',
						icon: 'none'
					});
					return;
				}
				
				uni.chooseImage({
					count: 9 - this.uploadedImages.length,
					success: (res) => {
						this.uploadedImages = [...this.uploadedImages, ...res.tempFilePaths];
					}
				});
			},
			deleteImage(index) {
				this.uploadedImages.splice(index, 1);
			},
			addApprover() {
				// 实际应用中需要实现选择审批人的功能
				uni.showToast({
					title: '添加审批人功能',
					icon: 'none'
				});
			},
			saveForRelease() {
				uni.showToast({
					title: '已保存草稿',
					icon: 'success'
				});
			},
			submitLeave() {
				if (!this.selectedCategory) {
					uni.showToast({
						title: '请选择请假类别',
						icon: 'none'
					});
					return;
				}
				
				if (!this.startDate || !this.endDate) {
					uni.showToast({
						title: '请选择请假时间',
						icon: 'none'
					});
					return;
				}
				
				// 模拟提交请假申请
				uni.showLoading({
					title: '提交中...'
				});
				
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					});
					
					// 提交成功后返回上一页
					setTimeout(() => {
						this.navigateBack();
					}, 1500);
				}, 1000);
			},
			// 新的选择和确认合并方法
			selectAndConfirmCategory(category) {
				this.selectedCategory = category;
				this.closeCategoryPicker();
			},
			// 关闭类别选择器
			closeCategoryPicker() {
				this.showCategoryPopup = false;
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}
	
	.leave-application {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	
	
	
	/* 表单内容样式 */
	.form-content {
		flex: 1;
		overflow-y: auto;
		padding: 0;
		background-color: #f5f5f5;
	}
	
	.form-card {
		background-color: #fff;
		margin: 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.form-item {
		margin-bottom: 40rpx;
	}
	
	.form-label {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
		font-weight: 400;
		display: flex;
		align-items: center;
	}
	
	.required:before {
		content: "* ";
		color: #ff5252;
		margin-right: 2rpx;
	}
	
	.form-label-with-note {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 32rpx;
		color: #333;
	}
	
	.note-text {
		font-size: 26rpx;
		color: #ff5252;
	}
	
	.form-input-container {
		background-color: #fff;
		border: 1rpx solid #eaeaea;
		border-radius: 12rpx;
		overflow: hidden;
	}
	
	/* 选择器样式 */
	.selector {
		display: flex;
		align-items: center;
		height: 100rpx;
		padding: 0 30rpx;
	}
	
	.selector-icon {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
		
		border-radius: 8rpx;
		padding: 10rpx;
	}
	
	.selector-icon image {
		width: 40rpx;
		height: 40rpx;
	}
	
	.selector-text {
		flex: 1;
		font-size: 32rpx;
		color: #333;
	}
	
	.selector-arrow {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.selector-arrow image {
		width: 40rpx;
		height: 40rpx;
		opacity: 0.6;
	}
	
	/* 输入框样式 */
	.day-input {
		height: 100rpx;
		padding: 0 30rpx;
		font-size: 32rpx;
		color: #999;
	}
	
	.description-input {
		width: 100%;
		height: 200rpx;
		padding: 30rpx;
		font-size: 32rpx;
		box-sizing: border-box;
	}
	
	/* 图片上传样式 */
	.image-uploader {
		display: flex;
		flex-wrap: wrap;
	}
	
	.upload-box {
		width: 160rpx;
		height: 160rpx;
		border: 2rpx dashed #ccc;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		background-color: #f9f9f9;
	}
	
	.upload-icon {
		font-size: 60rpx;
		color: #ccc;
	}
	
	.image-preview {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
		border-radius: 12rpx;
		overflow: hidden;
	}
	
	.image-preview image {
		width: 100%;
		height: 100%;
	}
	
	.delete-image {
		position: absolute;
		top: 5rpx;
		right: 5rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 30rpx;
	}
	
	/* 审批人样式 */
	.approver-selector {
		margin-top: 20rpx;
	}
	
	.add-approver {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 2rpx dashed #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f9f9f9;
	}
	
	.add-icon {
		font-size: 60rpx;
		color: #ccc;
		line-height: 80rpx;
	}
	
	/* 底部按钮样式 */
	.bottom-actions {
		display: flex;
		padding: 30rpx;
		background-color: #fff;
		border-top: 1rpx solid #f0f0f0;
	}
	
	.action-btn {
		flex: 1;
		height: 90rpx;
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 500;
	}
	
	.save-btn {
		margin-right: 20rpx;
		border: 1rpx solid #19B36E;
		color: #19B36E;
	}
	
	.submit-btn {
		background-color: #19B36E;
		color: #fff;
	}
	
	/* 添加日历相关样式 */
	.leave-duration-text {
		font-size: 30rpx;
		color: #666;
		margin-bottom: 20rpx;
	}
	
	.calendar-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		transition: opacity 0.3s;
		opacity: 0;
	}
	
	.calendar-popup {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		transform: translateY(100%);
		transition: transform 0.3s ease-out;
		padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
		padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
		max-height: 90vh;
	}
	
	.calendar-popup-show {
		transform: translateY(0);
	}
	
	.calendar-popup-show + .calendar-mask {
		opacity: 1;
	}
	
	.calendar-container {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		padding-bottom: 30rpx;
		max-height: calc(90vh - constant(safe-area-inset-bottom));
		max-height: calc(90vh - env(safe-area-inset-bottom));
		overflow-y: auto;
	}
	
	.calendar-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f2f2f2;
	}
	
	.calendar-title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}
	
	.calendar-nav {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.calendar-nav-icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	.calendar-weekdays {
		display: flex;
		padding: 20rpx 0;
	}
	
	.weekday {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
		padding: 10rpx 0;
	}
	
	.calendar-days {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 0 30rpx;
	}
	
	.calendar-day {
		width: 14.28%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		position: relative;
		z-index: 1;
		color: #333;
	}
	
	.other-month {
		color: #ccc;
	}
	
	.selected-day {
		color: #fff;
		font-weight: bold;
		position: relative;
	}
	
	.selected-day::before {
		content: '';
		position: absolute;
		width: 70rpx;
		height: 70rpx;
		background-color: #19B36E;
		border-radius: 50%;
		z-index: -1;
	}
	
	.start-day::before {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	
	.end-day::before {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	
	.in-range-day {
		background-color: rgba(25, 179, 110, 0.2);
	}
	
	.calendar-actions {
		padding: 20rpx 30rpx;
	}
	
	.calendar-submit-btn {
		background-color: #19B36E;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		text-align: center;
		width: 100%;
	}
	
	.calendar-close-btn {
		margin: 20rpx 30rpx 0;
		border: 1rpx solid #19B36E;
		color: #19B36E;
		font-size: 32rpx;
		font-weight: 500;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		text-align: center;
	}
	
	/* 类别选择器样式 */
	.category-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		transition: opacity 0.3s;
		opacity: 0;
	}
	
	.category-popup {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		transform: translateY(100%);
		transition: transform 0.3s ease-out;
		padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
		padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
	}
	
	.category-popup-show {
		transform: translateY(0);
	}
	
	.category-popup-show + .category-mask {
		opacity: 1;
	}
	
	.category-container {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		padding-bottom: 30rpx;
	}
	
	.category-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #f2f2f2;
		text-align: center;
	}
	
	.category-title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}
	
	.category-options {
		padding: 20rpx 0;
		margin-bottom: 20rpx;
	}
	
	.category-option {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		position: relative;
		transition: background-color 0.2s;
	}
	
	.category-option:active {
		background-color: #f9f9f9;
	}
	
	.category-option-selected {
		background-color: rgba(25, 179, 110, 0.1);
	}
	
	.category-option-selected::after {
		content: '';
		position: absolute;
		right: 30rpx;
		width: 36rpx;
		height: 36rpx;
		background-color: #19B36E;
		border-radius: 50%;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
		background-size: 24rpx;
		background-position: center;
		background-repeat: no-repeat;
	}
	
	.category-option-icon {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: rgba(25, 179, 110, 0.1);
		margin-right: 20rpx;
	}
	
	.category-option-icon image {
		width: 40rpx;
		height: 40rpx;
	}
	
	.category-option-text {
		font-size: 32rpx;
		color: #333;
		flex: 1;
	}
	
	.category-actions {
		padding: 20rpx 30rpx;
	}
	
	.category-close-btn {
		margin: 0 30rpx;
		border: 1rpx solid #19B36E;
		color: #19B36E;
		font-size: 32rpx;
		font-weight: 500;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		text-align: center;
	}
	
	.category-submit-btn {
		display: none;
	}
</style> 